<template>
 
  <TopBar></TopBar>
  <Header></Header>
    <Suspense>
    <router-view></router-view>
    </Suspense>
    <Footer></Footer>
<!-- 登录窗口 -->
<Login v-show="isShowLogin"></Login>
</template>

<script setup>

// 引入状态管理
import { useStore } from 'vuex';

// import Index from "@/pages/index.vue"

/**
 * 由于vuex4使用createStore工厂函数初始化store
 * 且vue使用createApp初始化项目
 * 所以原来利用this.$store.state来获取数据的方法失效。
 * 这里利用toRaw函数来将store 返回的proxy类型的数据解析出来
*/

import { toRaw } from '@vue/reactivity';

const store = useStore();

import { computed } from 'vue';
// 这里的isShowLogin的值由状态管理中的loginMode组件控制 
//注意要写在computed监听中

let isShowLogin = computed(() => toRaw(store.state.loginModel.isShowLogin))

  // let isShowLogin = true;
</script>

<style scoped></style>
